<template>
  <div class="main">
    <div class="top">
      <div class="top_l">
        <p style="margin-top: 35px; color: #00eafa">
          累计 <span style="color: #ffffff">{{ count }}</span> 车次
        </p>
        <span style="font-size: 14px; color: #ffffff; line-height: 26px"
          >累计入库</span
        >
        <div class="rktj">
          <div
            style="margin: 0 auto; width: 304px; display: block"
            v-show="rkList == ''"
          >
            <img src="../../assets/img/zwsj.png" alt="" srcset="" />
          </div>

          <div v-for="(item, index) in rkList" :key="index">
            <div>
              <p class="sp1" style="margin-top: 25px">{{ item.weightCount.toFixed(2) }}</p>
            </div>
            <p class="sp1">{{ item.materialName }}</p>
          </div>
        </div>
      </div>
      <div class="top_c">
        <img
          src="../../assets/img/title/ab.webp"
          width="693"
          height="329"
          alt=""
          style="margin-left: 30px; margin-top: 40px"
        />
      </div>
      <div style="width: 588px; height: 414px" id="play1">
        <!-- <div class="top_r" id="play1">监控1</div>
        <div class="top_r" id="play2" style="margin-bottom: 14px">监控1</div>
        <div class="top_r" id="play3">监控1</div>
        <div class="top_r" id="play4">监控1</div> -->
      </div>
    </div>
    <div class="bottom">
      <div class="b_l">
        <p class="tit">每月入库趋势</p>
        <div class="tit">
          <!-- <div style="float: right" class="sous">
            <div></div>
            <span>至</span>
            <div></div>
            <span style="color: #00f6ff">搜索</span>
          </div> -->
        </div>
        <div style="display: flex; margin-top: 50px">
          <div style="width: 800px; margin-left: 40px">
            <div id="container4"></div>
          </div>
          <div v-show="false">
            <div
              style="
                width: 30px;
                height: 10px;
                background: #00f6ff;
                border-radius: 5px;
              "
            ></div>
            <p class="text_color">骨料1</p>
            <div
              style="
                width: 30px;
                height: 10px;
                background: #148ffb;
                border-radius: 5px;
              "
            ></div>
            <p class="text_color">骨料2</p>
            <div
              style="
                width: 30px;
                height: 10px;
                background: #148ffb;
                border-radius: 5px;
              "
            ></div>
            <p class="text_color">骨料3</p>
          </div>
        </div>
      </div>
      <div class="b_r">
        <p class="tit">收料明细</p>
        <div
          style="float: right; margin-right: 50px; visibility: hidden"
          class="sous"
        >
          <div></div>
          <span>至</span>
          <div></div>
          <span style="color: #00f6ff">搜索</span>
        </div>
        <table cellspacing="0" cellpadding="0">
          <tr
            style="
              width: 910px;
              height: 36px;
              background: linear-gradient(180deg, #015eea, #00c0fa);
              opacity: 0.5;
            "
          >
            <td class="c1">发货单位</td>
            <td class="c2">车辆</td>
            <td class="c3">品名</td>
            <td class="c4">出厂日期</td>
            <td class="c5">规格型号</td>
            <td class="c6">货物流向</td>
            <td class="c7">净重</td>
          </tr>
        </table>

        <div class="scoll" id="scoll">
          <table cellspacing="0" cellpadding="0">
            <tr v-for="(item, index) in slList" :key="index">
              <td class="c1">{{ item.supplier }}</td>
              <td class="c2">{{ item.carNo }}</td>
              <td class="c3">{{ item.materialName }}</td>
              <td class="c4">{{ item.actDate }}</td>
              <td class="c5">{{ item.materialSpecial }}</td>
              <td class="c6">{{ item.trafficDirection }}</td>
              <td class="c7">{{ item.weight }}</td>
            </tr>
            <tr></tr>
            <tr></tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Chart } from "@antv/g2";

export default {
  data() {
    return {
      // 收料明细
      slList: "",
      count: "",
      decoder: "",
      decoder1: "",
      decoder2: "",
      decoder3: "",
      timer: "",
      // 入库
      rkList: "",
      url:
        "ezopen://open.ys7.com/G28624117/3.hd.live,ezopen://open.ys7.com/G28624117/4.hd.live,ezopen://open.ys7.com/G28624117/2.hd.live,ezopen://open.ys7.com/G28624117/1.hd.live",
    };
  },
  created() {},
  destroyed() {
    this.onStop();
    clearInterval(this.timer);
  },
  mounted() {
    this.chart4();
    this.decoder = new EZUIKit.EZUIPlayer({
      id: "play1",
      autoplay: true,
      url: this.url,
      accessToken: localStorage.getItem("videoToken"),
      decoderPath: "/static/ezui",
      width: 588,
      height: 414,
      splitBasis: 2,
    });
    this.$api
      .WagonBalanceCountWagonByRKTJ({
        user_id: localStorage.getItem("user_id"),
      })
      .then((res) => {
       
        this.rkList = res.data;
        
      })
      .catch((err) => {
      
      });
    this.$api
      .WagonBalanceCountWagonByLJCC({
        user_id: localStorage.getItem("user_id"),
      })
      .then((res) => {
       
        this.count = res.data;
      })
      .catch((err) => {
      
      });
    this.$api
      .WagonBalanceFindWagon({
        user_id: localStorage.getItem("user_id"),
      })
      .then((res) => {
    
        this.slList = res.data;
      })
      .catch((err) => {
      
      });

    // this.autoSroll("scoll");
  },
  methods: {
    autoSroll(Id) {
      // flag 为true时停止滚动
      var flag = false;

      var h = -1;
      this.timer = setInterval(() => {
        flag = true;
        //获取当前滚动条高度
        var current = document.getElementById(Id).scrollTop;
        if (current == h) {
          //滚动到底端,返回顶端
          h = 0;
          document.getElementById(Id).scrollTop = h + 1;
        } else {
          //以25ms/3.5px的速度滚动
          h = current;
          document.getElementById(Id).scrollTop = h + 1;
        }
      }, 50);
    },

    onStop() {
      let url = this.url;
      let urlList = [];
      if (url.length > 0) {
        urlList = url.split(",");
      }
      for (let i = 0; i < urlList.length; i++) {
        if (urlList[i] && urlList[i].length > 0) {
          this.decoder.stop(i);
        }
      }
    },

    chart4() {
      let data = [
        {
          materialName: "5-16mm",
          materialSpecial: "吨",
          weightCount: 0,
          netCount: 0,
        },
        {
          materialName: "P42.5散",
          materialSpecial: "吨",
          weightCount: 318200,
          netCount: 318200,
        },
        {
          materialName: "RAWY101",
          materialSpecial: "吨",
          weightCount: 3960,
          netCount: 3960,
        },
        {
          materialName: "二级",
          materialSpecial: "吨",
          weightCount: 97440,
          netCount: 97440,
        },
        {
          materialName: "碎石",
          materialSpecial: "吨",
          weightCount: 80,
          netCount: 80,
        },
      ];
      this.$api
        .WagonBalanceCountWagonByMYQS({
          user_id: localStorage.getItem("user_id"),
        })
        .then((res) => {
          data = res.data;
          const chart = new Chart({
            container: "container4",
            autoFit: true,
            height: 300,
          });
          chart.data(data);

          chart.scale("weightCount", {
            alias: "实重", //为value字段设置别名，在tooltip显示时则显示别名
            min: 0,
          });
          chart.scale("netCount", {
            alias: "净重", //为value字段设置别名，在tooltip显示时则显示别名
            min: 0,
          });
          chart.legend({
            custom: true,
            items: [
              {
                value: "weightCount",
                name: "实重",
                marker: { symbol: "square", style: { fill: "#3182bd", r: 5 } },
              },
              {
                value: "netCount",
                name: "净重",
                marker: {
                  symbol: "hyphen",
                  style: { stroke: "#fdae6b", r: 5, lineWidth: 3 },
                },
              },
            ],
          });
          chart.axis("people", {
            grid: null,
            title: {
              style: {
                fill: "#fdae6b",
              },
            },
            label: {
              style: {
                fill: "#fdae6b",
              },
            },
          });
          chart.tooltip({
            shared: true,
          });
          chart
            .interval()
            .position("materialName*weightCount")
            .color("#3182bd");
          chart
            .line()
            .position("materialName*netCount")
            .color("#fdae6b")
            .size(3)
            .shape("smooth");
          chart
            .point()
            .position("materialName*netCount")
            .color("#fdae6b")
            .size(3)
            .shape("circle");

          chart.interaction("active-region");
          chart.removeInteraction("legend-filter"); // 自定义图例，移除默认的分类图例筛选交互
          chart.render();
        });
    },
  },
};
</script>
<style scoped>
.sp1 {
  width: 100%;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  color: #ffffff;
}

.tit {
  margin-top: 7px;
  margin-left: 60px;
  font-weight: 400;
  color: #00eafa;
}

.text_color {
  color: #ffffff;
  font-size: 12px;
}
.c1 {
  width: 250px;
}
.c2 {
  width: 100px;
}
.c3 {
  width: 100px;
}
.c4 {
  width: 100px;
}
.c5 {
  width: 100px;
}
.c6 {
  width: 180px;
}
.c7 {
  width: 100px;
}

.sous {
  color: #ffffff;
  margin-right: 100px;
}

.sous div {
  display: inline-block;
  margin: 0 5px;
  width: 80px;
  border-radius: 1px;
  border-bottom: 2px solid #ffffff;
}

.main {
  padding: 20px;
}

.top {
  display: flex;
}

.top_l {
  background: url("../../assets/img/title/sld.webp");
  width: 464px;
  height: 414px;
  margin: 0px 10px;
}

.top_c {
  background: url("../../assets/img/title/sla.webp");
  width: 760px;
  height: 414px;
  margin: 0px 10px;
}

.top_r {
  background: url("../../assets/img/title/slr.webp");
  width: 274px;
  height: 200px;
  display: inline-block;
  margin: 0px 10px;
  font-size: 20px;
  font-weight: 400;
  text-align: center;
  line-height: 200px;
  color: #00eafa;
}

.bottom {
  margin-top: 20px;
  display: flex;
}

.b_r,
.b_l {
  background: url("../../assets/img/title/ttt.webp");
  width: 910px;
  height: 400px;
  margin: 0px 13px;
}

.top_l {
  padding-left: 16px;
}

.rktj > div {
  width: 65px;
  display: inline-block;
  margin-right: 25px;
}

.rktj > div > div {
  display: inline-block;
  background: url("../../assets/img/title/rktj.webp");
  width: 65px;
  height: 72px;
}

.rk2 {
  margin-top: 40px;
}

.rk2 > div {
  width: 38px;
  display: inline-block;
  margin-right: 25px;
}

.rk2 > div > div {
  display: inline-block;
  background: url("../../assets/img/title/sn.webp") no-repeat;
  background-size: 100% 100%;
  width: 31px;
  height: 92px;
}

table {
  font-size: 14px;
  color: #ffffff;
  width: 100%;
  text-align: center;
}

table td {
  border-bottom: 2px solid #1c5ed4;
}

table tr:nth-child(odd) {
  width: 910px;
  height: 60px;
  background: #0b334c;
  border: 2px solid;
  border-image: linear-gradient(-90deg, #299bff, #1753ff) 10 10;
}

table tr:nth-child(even) {
  width: 910px;
  height: 60px;
  background: #06112d;
  border: 2px solid;
  border-image: linear-gradient(-90deg, #299bff, #1753ff) 10 10;
  opacity: 0.8;
}
.scoll {
  width: 100%;
  height: 310px;
  overflow-x: hidden;
  overflow-y: scroll;
}
</style>
